<template>
    <titleComponents :title="title" />
    <el-row :gutter="24" style="height: auto;width: 100%;margin-bottom: 0px;">
        <el-col :span="8">
            <articleHomeShowComponents :articles="articles" />
            <div class="more">
                <router-link :to="{ name: 'person' }" class="more">更多></router-link>
            </div>
        </el-col>
        <el-col :span="16">
            <photoHomeShowComponents :title="title" />
        </el-col>
    </el-row>
</template>

<script>
import titleComponents from './homeComponents/titleComponents.vue';
import articleHomeShowComponents from './homeComponents/articleHomeShowComponents.vue';
import photoHomeShowComponents from './homeComponents/photoHomeShowComponents.vue';
import { ref } from 'vue';
import $ from 'jquery';
export default {
    name: "storeComponents",
    components: {
        titleComponents,
        articleHomeShowComponents,
        photoHomeShowComponents,
    },
    setup() {
        let title = ref("人物故事");
        let articles = ref("人物故事");
        $.ajax({
            url: "http://124.221.73.180:3001/articleGet/getArticleByTagHome/",
            type: "post",
            data: {
                tag: "人物故事",
            },
            success(resp) {
                articles.value = resp;
            }
        })

        return {
            articles,
            title,
        }
    }
}

</script>

<style scoped>
.more {
    float: right;
    color: rgb(102, 102, 102);
    text-decoration: none;
}

.more :visited {
    text-decoration: none;
}

.more :hover {
    color: red;
}
</style>